<template>
  <div class="footerBar">
    <van-tabbar v-model="active">
      <van-tabbar-item icon="friends-o" @click="itemShow=true">添加到分组</van-tabbar-item>
      <van-tabbar-item icon="setting-o" @click="delCartList">移除书架</van-tabbar-item>
    </van-tabbar>
    <van-dialog v-model="itemShow" title="分组列表" show-cancel-button>
      <div v-for="(v,i) in itemList" :key='i'>{{v.name}}</div>
      <van-button type="primary" @click="itemShow=false;addItemShow=true">新建分组</van-button>
      <!-- bookList
      cartList
      itemList-->
    </van-dialog>
    <van-dialog v-model="addItemShow" title="新建分组" show-cancel-button @confirm="addItem">
       <van-field v-model="itemName" label="分组名称" placeholder="请输入分组名称" />
    </van-dialog>
  </div>
</template>

<script>
export default {
  props: ["checkList",'itemId'],
  data() {
    return {
      active: 0,
      itemShow: false,
      addItemShow: false,
      itemName: null,
    };
  },
  computed: {
    itemList() {
      return this.$store.state.itemList
    }
  },
  methods: {
    addItem() {
      // 深拷贝数据
      let list = [...this.checkList];
      // 修改所有的checked为false
      list.forEach((v) => {
        v.checked = false;
      })
      this.$store.commit("createItemList", {
        name: this.itemName,
        itemId: new Date().getTime(),
        list,
      });
      this.delCartList();
    },
    delCartList() {
      this.checkList.forEach((v, i) => {
        if(this.itemId) {
          this.$store.commit("delItemListBook", {
            bookId: v.id,
            itemId: this.itemId
          });
        } else {
          this.$store.commit("delCL", v.id);
        }
      });
    }
  },
};
</script>

<style>
.footerBar {
  z-index: 9;
}
</style>